<template>
    <!-- <div data-v-001>我是程序员</div> -->
    <div>我是程序员
        <h5>Son组件</h5>
        <p>父组件传值msg是{{ msg }}</p>
        <p>父组件传值user是{{ user }}</p>
        <button v-on:click="add">子传父按钮+1</button>
        <h3 ref="myh3">MyRef测试</h3>
        <button v-on:click="getRef">获取当前引用</button>
        <input type="text" v-if="inputVisible" ref="ipt">
        <button v-else @click="showInput">展示input输入框</button>
    </div>

</template>

<script>
export default {
  name: 'MyLeft',
  props: {
    msg: String,
    user: Object
  },
  data () {
    return {
      nums: 0,
      inputVisible: false
    }
  },
  methods: {
    add () {
      this.nums += 1
      this.$emit('numchange', this.nums)
    },
    getRef () {
      console.log('-------')
      console.log(this)
      console.log(this.$refs.myh3)
      this.$refs.myh3.style.color = 'red'
    },
    showInput () {
      this.inputVisible = true
      // 因为是动态渲染，直接写聚焦不行，需要$nextTick中写
      this.$nextTick(() => {
        this.$refs.ipt.focus()
      })
    }
  }
}
</script>

<!-- <style>
    div[data-v-001]{
        border: 1px solid red;
        color: red;
    }
    //注释哦
</style> -->

<style scoped>
    /* div{
        border: 1px solid red;
        color: red;
    } */
</style>
